<template>
	<div class="system-role-dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px" v-if="state.dialog.isShowDialog">
			<el-form ref="cateDialogFormRef" :model="state.ruleForm" size="default" label-width="120px" :rules="state.rules">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="名称" prop="name">
							<el-input v-model="state.ruleForm.name" placeholder="请输入名称" clearable :disabled="state.type === 'view'"></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="上传文件" prop="img">
							<UploadFile
								@uploadSuccess="uploadSuccess"
								@uploadRemove="uploadRemove"
								:limit="1"
								:imgList="state.fileList"
                :isDisabled="state.type === 'view'"
								fileType="text"
							></UploadFile>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="排序" prop="sort">
							<el-input-number v-model="state.ruleForm.sort" :min="0" :max="999" controls-position="right" placeholder="请输入排序" class="w100" :disabled="state.type === 'view'"/>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="systemRoleDialog">
import { reactive, ref, nextTick, defineAsyncComponent } from 'vue';
import { filelistDetail, addFilelist, updateFilelist } from '/@/api/filelist';
import { ElMessage } from 'element-plus';

const UploadFile = defineAsyncComponent(() => import('/@/components/uploadFile/index.vue'));

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

// 定义父组件向子组件传值
const props = defineProps({
	id: { type: Number, required: false, default: 0 },
});

// 定义变量内容
const cateDialogFormRef = ref();
const state = reactive({
	id: 0,
  type: '',
	fileList: <EmptyArrayType>[],
	ruleForm: <EmptyObjectType>{},
	rules: {
		url: [
			{
				required: true,
				message: '请上传文件',
				trigger: 'blur',
			},
		],
	},
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitTxt: '',
	},
	treeList: [] as any
});

// 取消
const initForm = () => {
	state.ruleForm = <EmptyObjectType>{};
};

// 打开弹窗
const openDialog = (type: string, id: any) => {
	if (type === 'edit') {
		state.id = id;
		state.dialog.title = '修改';
		state.dialog.submitTxt = '修 改';
	} else if(type === 'add') {
		initForm();
		state.id = 0;
		state.dialog.title = '新增';
		state.dialog.submitTxt = '新 增';
		state.fileList = [];
	} else if(type === 'view') {
		state.id = id;
		state.dialog.title = '查看';
		state.dialog.submitTxt = '查 看';
	} 
  state.type = type;
	state.dialog.isShowDialog = true;
	// 清空表单，此项需加表单验证才能使用
	nextTick(() => {
		cateDialogFormRef.value.resetFields();
		cateDialogFormRef.value.clearValidate();
	});
	if (id) {
		getCateDetail();
	}
};
// 关闭弹窗
const closeDialog = () => {
	state.dialog.isShowDialog = false;
};
// 取消
const onCancel = () => {
	closeDialog();
};
// 提交
const onSubmit = () => {
	cateDialogFormRef.value.validate((valid: boolean, fields: EmptyArrayType) => {
		if (valid) {
			if (state.id) {
				updateFilelist(state.ruleForm).then((res: any) => {
					if (res.status === 'success') {
						initForm();
						closeDialog();
						emit('refresh');
					} else {
						ElMessage.error(res.msg);
					}
				});
			} else {
				addFilelist(state.ruleForm).then((res: any) => {
					if (res.status === 'success') {
						initForm();
						closeDialog();
						emit('refresh');
					} else {
						ElMessage.error(res.msg);
					}
				});
			}
		} else {
			return false;
		}
	});
};
// 获取详情数据
const getCateDetail = () => {
	filelistDetail(state.id).then((res: any) => {
		if (res.status === 'success') {
			state.ruleForm = res.data;
			state.fileList = [{ url: res.data.url, name: res.data.file_name }];
		} else {
			ElMessage.error(res.msg);
		}
	});
};

// 上传成功
const uploadSuccess = (res: any, file: any) => {
	if (res.length > 0) {
		state.ruleForm.url = res[0].url;
		state.ruleForm.file_name = res[0].name;
	}
};
// 删除图片
const uploadRemove = (res: any, file: any) => {
	state.ruleForm.url = '';
};

// 暴露变量
defineExpose({
	openDialog,
});
</script>

<style scoped lang="scss">
.system-role-dialog-container {
	.menu-data-tree {
		width: 100%;
		border: 1px solid var(--el-border-color);
		border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
		padding: 5px;
	}
}
</style>
